<template>
  <div class="table-wrapper" v-cloak>
    <div class="functional-btn-box">
      <div class="operate-btn-group tree-btn-group" v-if="isNeedTree && isNeedTree !== 'false'" v-show="isShowTree">
        <a class="ake_btn ake_btn_blue ake_btn_show_tree" @click.stop.prevent="toggleTreeBox">
          <i class="btn-icon btn-icon-left"></i>
          <span>{{selectedNode || '请选择停车场'}}</span>
          <i class="btn-icon btn-icon-right el-icon-arrow-down"></i>
        </a>
      </div>
      <slot name="operateBtnGroup">
        <div class="operate-btn-group">
          <!-- <a class="ake_btn ake_btn_blue ake_btn_text" @click.prevent="toOpenModal('addModal')">添加</a>
          <a href="javascript:;" class="ake_btn ake_btn_blue ake_btn_text" @click.prevent="toOpenModal('deleteModal')">删除</a>
          <a href="javascript:;" class="ake_btn ake_btn_blue ake_btn_text">编辑</a> -->
        </div>
      </slot>
      <div class="operate-btn-group standard-btn-group">
        <a href="javascript:;" class="ake_btn ake_btn_green ake_btn_text mr10" @click.stop="toPrintTable" v-if="isNeedPrint && isNeedPrint !== 'false'">打印</a>
      </div>
      
      <div class="table-btn-group">
        <!-- <a href="javascript:;" class="ake_btn ake_btn_blue ake_font_btn" @click="toggleFullScreenTable"><i class="ion-arrow-expand"></i></a> -->
        <a href="javascript:;" class="ake_btn ake_btn_blue ake_font_btn" @click.stop="toggleSettingFn" v-if="isSetTable && isSetTable !== 'false'"><i class="ion-gear-a"></i></a>
        <transition name="scale">
          <div class="table-setting-box scale-box" v-if="isSetTable && isSetTable !== 'false'" v-show="isShowSetting">
            <div class="setting-scroll-box">
              <!-- <ul v-if="!isReload"> -->
              <ul>
                <template v-for="(item, index) in theadsArr">
                  <li :key="index" :class="[item.prop == 'reno' ? 'hidden' : '', item.isMultiHeader ? 'has-second-stage' : '']" :fixed="fixedCols > 1 && index + 1 < fixedCols ? 'left' : 'false'">
                    <div class="operation-line" @mouseenter="showOperation(index)" @mouseleave="hideOperation(index)">
                      <label v-if="!isReload">
                        <input type="checkbox" class="icheck-icon" :checked="item.checked" @click.prevent.stop="displayColumnFn(index, item.checked)">
                        {{item.idx !== undefined ? item.text + item.idx : item.text}}
                      </label>
                      <span class="operate-btn-box" v-if="item.isShow">
                        <i class="ion-arrow-up-c light-green" aria-hidden="true" title="前进" @click.stop="moveColumnFn(index,1)"></i>
                        <i class="ion-arrow-down-c light-green" aria-hidden="true" title="后退" @click.stop="moveColumnFn(index,0)"></i>
                        <input type="number" class="form-control" maxlength="3" v-model="singleThWidth" :placeholder="item.minWidth" @keyup.enter="resetWidth(index, singleThWidth)">
                      </span>
                    </div>
                    <ul v-if="item.isMultiHeader" class="second-header">
                      <li v-for="(li, i) in item.children" :key="i">
                        <div class="operation-line" @mouseenter="showOperation(index, i)" @mouseleave="hideOperation(index, i)">
                          <label>
                            <input type="checkbox" class="icheck-icon" :checked="item.checked" @click.prevent.stop="displayColumnFn(index, item.checked, i)">
                            {{li.idx !== undefined ? li.text + li.idx : li.text}}
                          </label>
                          <span class="operate-btn-box" v-if="li.isShow">
                            <i class="ion-arrow-up-c light-green" aria-hidden="true" title="前进" @click.stop="moveColumnFn(index,1,i)"></i>
                            <i class="ion-arrow-down-c light-green" aria-hidden="true" title="后退" @click.stop="moveColumnFn(index,0,i)"></i>
                            <input type="number" class="form-control" maxlength="3" v-model="singleThWidth" :placeholder="li.minWidth" @keyup.enter="resetWidth(index, singleThWidth, i)">
                          </span>
                        </div>
                      </li>
                    </ul>
                  </li>
                </template>
              </ul>
              <!-- 
              <ul>
                <template v-for="(item, index) in theadShowed">
                  <li :key="index" :class="[theadHidden.length > 0 ? 'not-all' : '', item.prop == 'reno' ? 'hidden' : '', item.isMultiHeader ? 'has-second-stage' : '']" :fixed="fixedCols > 1 && index + 1 < fixedCols ? 'left' : 'false'">
                    <div class="operation-line" @mouseenter="showOperation(index)" @mouseleave="hideOperation(index)">
                      <label>
                        <input type="checkbox" class="icheck-icon" checked @click.prevent.stop="displayColumnFn(index, true)">
                        {{item.idx !== undefined ? langObj[item.text] + item.idx : langObj[item.text]}}
                      </label>
                      <span class="operate-btn-box" v-if="item.isShow">
                        <i class="ion-arrow-up-c light-green" aria-hidden="true" title="前进" @click.stop="moveColumnFn(index,1)"></i>
                        <i class="ion-arrow-down-c light-green" aria-hidden="true" title="后退" @click.stop="moveColumnFn(index,0)"></i>
                        <input type="number" class="form-control" maxlength="3" v-model="singleThWidth" :placeholder="item.minWidth" @keyup.enter="resetWidth(index, singleThWidth)">
                      </span>
                    </div>
                    <ul v-if="item.isMultiHeader" class="second-header">
                      <li v-for="(li, i) in item.children" :key="i">
                        <div class="operation-line" @mouseenter="showOperation(index, i)" @mouseleave="hideOperation(index, i)">
                          <label>
                            <input type="checkbox" class="icheck-icon" checked @click.prevent.stop="displayColumnFn(index, true, i)">
                            {{li.idx !== undefined ? langObj[li.text] + li.idx : langObj[li.text]}}
                          </label>
                          <span class="operate-btn-box" v-if="li.isShow">
                            <i class="ion-arrow-up-c light-green" aria-hidden="true" title="前进" @click.stop="moveColumnFn(index,1,i)"></i>
                            <i class="ion-arrow-down-c light-green" aria-hidden="true" title="后退" @click.stop="moveColumnFn(index,0,i)"></i>
                            <input type="number" class="form-control" maxlength="3" v-model="singleThWidth" :placeholder="li.minWidth" @keyup.enter="resetWidth(index, singleThWidth, i)">
                          </span>
                        </div>
                      </li>
                    </ul>
                  </li>
                </template>
              </ul>
              <ul>
                <li v-for="(item, index) in theadHidden" :key="index" :class="[item.isMultiHeader ? 'has-second-stage' : '']">
                  <label class="icheck">
                    <input type="checkbox" class="icheck-icon" @click.prevent.stop="displayColumnFn(index, false)">
                    {{item.idx !== undefined ? langObj[item.text] + item.idx : langObj[item.text]}}
                  </label>
                  <ul v-if="item.isMultiHeader" class="second-header">
                    <li v-for="(li, i) in item.children" :key="i">
                      <label>
                        <input type="checkbox" class="icheck-icon" @click.prevent.stop="displayColumnFn(index, false, i)">
                        {{li.idx !== undefined ? langObj[li.text] + li.idx : langObj[li.text]}}
                      </label>
                    </li>
                  </ul>
                </li>
              </ul>
              -->
            </div>
          </div>
        </transition>
      </div>
    </div>
    <div :id="tableId" class="table-box table-responsive">
      <template v-if="!isReload">
        <el-table :data="tbodysInfo" border stripe style="width: 100%" :height="tHeight" min-height="100" :default-sort = "{prop: orderBy, order: orderTy}" @selection-change="handleSelectionChange" @sort-change="handleSortChange">
          <div slot="empty">{{emptyText}}</div>
          <el-table-column type="selection" width="55" fixed v-if="hasCheckboxCol && hasCheckboxCol !== 'false'">
          </el-table-column>
          <slot name="tdCell" v-for="(oneTh, index) in theadsArr" v-if="oneTh.checked" :item="oneTh" :label="oneTh.text" :min-width="oneTh.minWidth" :width="oneTh.width" :prop="oneTh.prop" :sortable="oneTh.sortable ? 'custom' : false" :isMultiHeader="oneTh.isMultiHeader" :children="oneTh.children" :fixed="fixedCols > 1 && index + 1 < fixedCols ? 'left' : 'false'">
          </slot>
          <slot name="operateCell" fixed="right" label="操作"></slot>
          <!-- <el-table-column v-for="(oneTh, index) in theadsShowed" :label="oneTh.text" :min-width="oneTh.minWidth" :prop="oneTh.prop" :sortable="oneTh.sortable"> 
            <template scope="scope">
              <div :name="oneTh.prop" v-if="'authority' == oneTh.prop">
                <el-tag>{{ scope.row[oneTh.prop] }}</el-tag>
              </div>
              <span v-else>{{ scope.row[oneTh.prop] }}</span>
            </template>
          </el-table-column> -->
          <!-- <el-table-column
            fixed="right"
            label="操作"
            min-width="100">
            <template scope="scope">
              <el-button size="small" class="ake_btn ake_font_btn ake_btn_blue" icon="edit"></el-button>
              <el-button size="small" class="ake_btn ake_font_btn ake_btn_red" icon="delete"></el-button>
            </template>
          </el-table-column>
          -->
        </el-table>
      </template>
    </div>
    
    <div id="printingTable" style="display: none"></div>
  </div>
</template>
<script>
import common from '../../mixins/common.js'

import data from '../../mixins/tables/data.js'
import watch from '../../mixins/tables/watch.js'
import basicTable from '../../mixins/tables/basicTable.js'
import setTable from '../../mixins/tables/setTable.js'
import saveTable from '../../mixins/tables/saveTable.js'

import print from '../../mixins/tables/print.js'

export default {
  mixins: [common, data, watch, setTable, saveTable, basicTable, print],
  data() {
    return {
      
    }
  },
  mounted () {
    
  }
}

</script>

<style lang="less">
@import '../../assets/less/table.less';

</style>
